<template>
  <view class="page">
    <Nav title="创建试验"></Nav>
    <view class="main-wrapper">
      <view class="action-wrapper">
        <view class="action-wrapper-title">试验步骤</view>
        <view class="action-wrapper-main">
          <view
            v-for="(item, index) in actionTabs"
            :key="{ index }"
            class="action-wrapper-item"
          >
            <view class="action-wrapper-item-icon">
              <image
                class="action-wrapper-item-icon-pic"
                :src="item.pic"
                mode="widthFix"
              ></image>
            </view>

            <view class="action-wrapper-item-text">{{ item.name }}</view>
          </view>
        </view>
      </view>
      <view class="input-wrapper">
        <view
          class="input-wrapper-item"
          style="border-bottom: 1px solid #e5e5e5"
        >
          <view class="input-wrapper-item-text">试验地块</view>
          <input
            class="input-wrapper-item-input"
            placeholder="请填写试验地块"
            placeholderStyle="color:#999999"
          />
        </view>
        <view class="input-wrapper-item">
          <view class="input-wrapper-item-text">试验对象</view>
          <input
            class="input-wrapper-item-input"
            placeholder="请填写试验对象"
            placeholderStyle="color:#999999"
          />
        </view>
      </view>
      <!-- {/* 试验目的 */} -->
      <view class="textarea-wrapper">
        <view
          class="textarea-wrapper-title"
          style="border-bottom: 1px solid #e5e5e5"
        >
          试验目的
        </view>
        <textarea
          v-model="formData.symd"
          :maxlength="50"
          class="textarea-wrapper-input"
          placeholder="写下本次试验的目的，要验证的问题，如“增加挂果率”"
        ></textarea>
        <view class="textarea-wrapper-maxlength">
          {{ formData.symd.length }}/50
        </view>
      </view>
      <!-- {/* 试验当前状况 */} -->
      <view class="textarea-wrapper">
        <view
          class="textarea-wrapper-title"
          style="border-bottom: 1px solid #e5e5e5"
        >
          试验当前状况
        </view>
        <textarea
          v-model="formData.systate"
          :maxlength="100"
          class="textarea-wrapper-input"
          placeholder="写下试验前的天气、作物、土壤、病虫害等的异常情况、或已发生的问题"
        ></textarea>
        <view class="textarea-wrapper-maxlength">
          {{ formData.systate.length }}/100
        </view>
      </view>
      <!-- {/* 试验方案 */} -->
      <view class="textarea-wrapper">
        <view
          class="textarea-wrapper-title"
          style="border-bottom: 1px solid #e5e5e5"
        >
          试验方案
        </view>
        <textarea
          v-model="formData.syfa"
          :maxlength="100"
          class="textarea-wrapper-input"
          placeholder="针对试验目的，结合当前现状，写下合理的试验方案"
        ></textarea>
        <view class="textarea-wrapper-maxlength">
          {{ formData.syfa.length }}/100
        </view>
      </view>
    </view>
    <view class="btn-box">
      <button class="btn">
        <text class="btn-text" style="color: #fff"> 保存 </text>
      </button>
    </view>
  </view>
</template>

<script>
import Nav from "@/components/nav.vue";
export default {
  components: {
    Nav,
  },
  data() {
    return {
      actionTabs: [
        {
          pic: require("@/static/img/experiment-icon.png"),
          name: "创建试验",
        },
        {
          pic: require("@/static/img/experiment-icon2.png"),
          name: "添加农事过程",
        },
        {
          pic: require("@/static/img/experiment-icon3.png"),
          name: "试验总结",
          path: "",
        },
        {
          pic: require("@/static/img/experiment-icon4.png"),
          name: "生成试验报告",
        },
      ],
      formData: { symd: "", systate: "", syfa: "" },
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  background: #f6f6f6;
  min-height: 100vh;
  padding-bottom: 120rpx;
}
.nav {
  width: 750rpx;
  height: 268rpx;
  opacity: 1;
  padding-top: 103rpx;
  &-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 32rpx;
    &-text {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      color: #202020;
    }
  }
  &-arrows {
    width: 16rpx;
    height: 26rpx;
  }
}
.main-wrapper {
  position: relative;
  top: -60rpx;
  padding: 0 30rpx;
}

.action-wrapper {
  width: 690rpx;
  background: #ffffff;
  overflow: hidden;
  margin: 0 auto 35rpx;
  &-title {
    font-size: 26rpx;
    font-weight: bold;
    color: #202020;
    text-align: center;
    margin: 40rpx 0 44rpx;
  }
  &-main {
    display: flex;
    flex-direction: row;
    margin-bottom: 30rpx;
  }
  &-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    &-text {
      width: 90rpx;
      font-size: 21rpx;
      color: #202020;
      text-align: center;
    }
    &-icon {
      width: 90rpx;
      height: 90rpx;
      background: #f6f6f6;
      border-radius: 45rpx;
      margin-bottom: 21rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      &-pic {
        width: 35rpx;
      }
    }
  }
}
.input-wrapper {
  background: #fff;
  padding: 0 30rpx;
  margin-bottom: 18rpx;
  &-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 35rpx 0;
    &-text {
      font-size: 26rpx;
      color: #202020;
      margin-right: 30rpx;
    }
    &-input {
      flex: 1;
      font-size: 26rpx;
      text-align: right;
      color: #202020;
    }
  }
}
.textarea-wrapper {
  padding: 0 30rpx 25rpx;
  background: #fff;
  margin-bottom: 18rpx;
  width: 100%;
  &-title {
    font-size: 26rpx;
    font-weight: bold;
    color: #1ac678;
    padding: 25rpx 0;
    margin-bottom: 25rpx;
  }
  &-input {
    width: 100%;
    height: 150rpx;
    font-size: 26rpx;
    color: #202020;
  }
  &-maxlength {
    font-size: 26rpx;
    color: #999999;
    text-align: right;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
}
.btn-box {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 50rpx;
  // position: absolute;
  // bottom: 108rpx;
}
.btn {
  width: 697rpx;
  background: #1ac678;
  border-radius: 54rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
